<template>
  <header class="header">
    <!--    <router-link :to="{ path: PAGE_HOME }" class="header__brand" style="display: inline-flex;-->
    <!--    justify-content: center;-->
    <!--    align-items: center;">-->
    <!--      <img :src="titleImg" :alt="$t('collection.AddDataSet.home')" style="width: 65%"/>-->
    <!--    </router-link>-->
    <!--    <router-link  to="/setlayout/index">目录</router-link>-->

    <div class="header__user" style="width: 100%">
      <div class="f-left">
        <Hamburger id="hamburger-container" :is-active="sidebar" class="hamburger-container"
                   @toggle-click="toggleSideBar"/>
        <Breadcrumb/>
        <!-- <el-breadcrumb separator="/">
          <el-breadcrumb-item style="font-weight: 700;">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-for="i in breadList" :key="i">{{i}}</el-breadcrumb-item>

          <el-breadcrumb-item @click="goup(index,i)" v-if="store.state.user.bread.length!=0&&route.path=='/setlayout/managementRegional'"
            v-for="(i,index) in store.state.user.bread" :key="index">{{i.name}}</el-breadcrumb-item>
          <el-breadcrumb-item v-if="route.query.name">{{route.query.name}}</el-breadcrumb-item>
        </el-breadcrumb> -->
      </div>
      <!--      <span class="navigation-bar__line"></span>-->
<!--      <span class="warn mt-10 mr10">-->
<!--        <el-tooltip :content="`MQTT${(indexStore.mqttConnected)?'已连接':'未连接'}`" placement="bottom">-->
        <!--          <el-icon :style="`font-size: 22px;${(indexStore.mqttConnected)?'color:green;':''}`"><Connection/></el-icon>-->
        <!--          {{indexStore.mqttNotify}}-->
        <!--        </el-tooltip>-->
<!--        <el-tooltip :content="`MQTT${(connectStauts)?'已连接':'未连接'}`" placement="bottom">-->
<!--          <el-icon :style="`font-size: 22px;${(connectStauts)?'color:green;':'color:red;'}`"><Connection/></el-icon>-->
<!---->
<!--        </el-tooltip>{{ (connectStauts) ? '已连接' : '未连接' }}-->
<!--      </span>-->
      <span class="navigation-bar__line"></span>
      <!--      <span class="warn mt-10 mr10">-->
      <!--        <el-icon style="font-size: 22px;"><Search/></el-icon>-->
      <!--      </span>-->
      <!--      <span class="navigation-bar__line"></span>-->
      <span class="warn mt-10 mr10">
        <el-badge :hidden="!notify.list.length" :value="notify.list.length" class="item" @click="showWarn = true">
          <el-icon class="icon" style="font-size: 22px;"><Bell/></el-icon>
        </el-badge>
          <el-drawer
              v-model="showWarn"
              :before-close="handleClose"
              :direction="direction"
              title="消息中心"
          >
            <el-tabs v-model="activeName" class="mesage-tabs" @tab-click="handleClick">
              <el-tab-pane label="设备消息" name="first">
<!--                <el-table :border="false" :data="notify.list" style="width: 100%">-->
                <!--                  <el-table-column prop="modifyOn" label="时间" />-->
                <!--                  <el-table-column prop="messageTitle" label="标题" />-->
                <!--                  <el-table-column prop="messageContent" label="内容" />-->
                <!--                </el-table>-->
                <div class="al-flex" v-for="(item,index) in notify.list" :key="index">
                  <el-badge :value="item.alertCount" :max="99" class="item-badge">
                        <el-card class="box-card" shadow="hover">
                          <div class="al-flex">
                             <Icon color="#e98f36" name="icon-jinggao" size="30px" class="mr-10"/>
                                <div class="msg-title">{{ item.messageTitle }}</div>
                          </div>

                  <div class="msg-content">{{ item.messageContent }}</div>
                <div class="msg-wrap">
                      <div class="msg-date">{{ item.firstTime }}</div>
                  <div class="msg-date">{{ item.lastTime }}</div>
                </div>
                </el-card>
                  </el-badge>
                </div>

              </el-tab-pane>

              <!--              <el-tab-pane label="系统消息" name="second">系统消息</el-tab-pane>-->
            </el-tabs>
              <el-button class="all-read" type="primary" @click="handlerAllRed">全部已读</el-button>
        </el-drawer>
      </span>
      <span class="navigation-bar__line"></span>
      <el-dropdown @command="handleUserAction">
        <span class="user__dropdown">
          <el-icon class="icon" style="font-size: 22px;"><User/></el-icon>
          <el-icon><ArrowDown/></el-icon>
          <!--          <el-icon><ArrowDownBold /></el-icon>-->
          <!--          <i class="fa fa-caret-down"></i>-->
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="modifyPwd">
              <!--              <i class="fa fa-user-secret mr10"></i>-->
              <el-icon>
                <EditPen/>
              </el-icon>
              {{ $t('Password') }}
            </el-dropdown-item>
            <el-dropdown-item command="logout" divided>
              <!--              <i class="fa fa-sign-out-alt mr10"></i>-->
              <el-icon>
                <SwitchButton/>
              </el-icon>
              {{ $t('Exit') }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

  </header>
</template>

<script lang="ts" setup>
import Hamburger from "@/components/hamburger/Index.vue"
import titleImg from '@/assets/images/logo_tt.png';
import {PAGE_HOME, PAGE_LOGIN} from '@/constants/page-url-constants';
import {MenuItem} from '@/types/menu-item';
import {reactive, onMounted, ref, computed, watch, getCurrentInstance, toRefs} from 'vue';
import {useRoute, useRouter} from 'vue-router';
import EsMenu from '@/components/es-menu/index.vue';
import {getCurrUser} from "@/services/login-service";
import {listByCurrUser} from "@/services/system/menu";
import Breadcrumb from "@/components/Breadcrumb/index.vue";
import {UserActionTypes} from '@/store/modules/user/action-types'
import {useStore} from "@/store";
import {useIndexStore} from '@/stores/modules/indexStore/indexStore'
import {useI18n} from 'vue-i18n'
import I18n from '@/lang'
import vueI18n from "@/lang";
import {UserMutationTypes} from "@/store/modules/user/mutation-types";
import {storeToRefs} from 'pinia';

import type {TabsPaneContext} from 'element-plus'
import {BaseService} from "@/services/baseService";
import {baseServiceEnum} from "@/services/enum";
import {ElMessage} from "element-plus/es";
import Icon from "@/components/icon/index.vue";


const service = new BaseService(baseServiceEnum.MESSAGE_LOG);
const indexStore = useIndexStore()
const showWarn = ref(false)
const direction = ref('rtl')
const activeName = ref('first')
const connectStauts = ref(false)
const notify = reactive({
  list: []
})

const handleClick = (tab: TabsPaneContext, event: Event) => {
  // console.log(tab, event)
}


const {t} = useI18n()
const {proxy} = getCurrentInstance()
// const router=useRouter()
const store = useStore()

const {sidebar, mqttClient, mqttNotify} = storeToRefs(indexStore);
const user = reactive({
  username: computed(() => {
    return store.state.user.name
  }),
  company: computed(() => {
    return store.state.user.tenantName
  }),
  menus: computed(() => {
    return store.state.user.routerList as Array<MenuItem>
  })
});
const options = reactive(
    [
      {
        label: 'Chinese',
        value: 'zh'
      },
      {
        label: 'English',
        value: 'en'
      }]
)
const value = ref(useI18n().locale)
watch(() => store.state.user.bread, (n) => {
  console.log(store.state.user.bread, '1414')
})

/*点击文件面包屑*/
function goup(index, i) {
  store.commit(UserMutationTypes.splice, index)
}

/*可以监听到国际化文件语言的变化*/
// const {locale}=useI18n()
// watch(locale,(newVal ,oldVal)=>{
//   console.log('$18')
// })
function changeL(v: any) {
  store.commit(UserMutationTypes.changeLang, v)
  console.log(v)
}

const router = useRouter();
const route = useRoute()
const data = reactive({
  breadList: []
})
const {breadList} = toRefs(data)
onMounted(() => {
  console.log(route.meta.title)
  // data.breadList=route.meta.title.split('/')

  onLoad()
})

/*
* 首次进入拉取警告日志列表(只查未读)
* */
const onLoad = () => {
  let params = {
    status: 0
  }
  // service.apiList(params).then((res) => {
  //   console.log(res)
  //   notify.list = res.data
  // })
}

watch(() => route.path, () => {
  console.log(route.meta.title.split('/'))
  data.breadList = route.meta.title.split('/')
})
// 监控mqtt消息
watch(() => indexStore.mqttNotify, (val) => {
  console.log(val)
  notify.list = indexStore.mqttNotify//[...indexStore.mqttNotify,...notify.list]
}, {deep: true, immediate: true})
//
watch(() => indexStore.mqttConnected, (val) => {
  connectStauts.value = val;
}, {deep: true, immediate: true})

function handleUserAction(command: string) {
  if (command === 'logout') {
    store.dispatch(UserActionTypes.ACTION_LOGIN_OUT, undefined)
    router.push({
      path: PAGE_LOGIN,
    });
  } else if (command === 'modifyPwd') {
    router.push({
      path: PAGE_HOME,
    });
  }
}

function listByCurrUser1() {
  listByCurrUser().then(({data}) => {
    console.log(data);
  })
}

onMounted(() => {
  // listByCurrUser1();
  // console.log(import.meta.env)
});


const toggleSideBar = () => {
  indexStore.sidebar = !indexStore.sidebar
  console.log(indexStore.sidebar);

}


/*
* 全部已读
* */
const handlerAllRed = () => {
  let idList: any = []
  notify.list.map((item: any) => {
    idList.push(item.id)
  })
  console.log(idList)
  // service.apiUpdateStatus({idList}).then(() => {
  //   onLoad()
  //   ElMessage.success('操作成功')
  // })

}

</script>


<style lang="scss" scoped>
.hamburger-container {
  line-height: 46px;
  height: 100%;
  float: left;
  padding: 0 15px;
  cursor: pointer;
  transition: background 0.3s;
  -webkit-tap-highlight-color: transparent;

  &:hover {
    background: rgba(0, 0, 0, 0.025);
  }
}

.header {
  position: relative;
  display: flex;
  align-items: center;
  height: 60px;
  background-color: white;
}

.header__brand {
  display: inline-block;
  padding: 10px 20px;
  height: 100%;
}

.icon {
  font-size: 22px;
}

.header__brand :deep(img) {
  max-height: 100%;
}

.header__user {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  padding-left: 0;
  // color: #fff;
  font-weight: bold;
  font-size: 14px;
  justify-content: space-between;
}

// :deep(.el-input__wrapper) {
//   width: 100px;
//   background-color: transparent;
// }
.el-breadcrumb__item:last-child .el-breadcrumb__inner,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
  //font-weight: 700;
}

.navigation-bar__line {
  margin: 0 16px 0 14px;
  width: 1px;
  height: 32px;
  background: #d1dbe5;
}

.warn {
  //align-self: center;
  //color: #74767d;
  //font-size: 18px;
  cursor: pointer;
  display: flex;
}

.user__dropdown {
  color: #74767d;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
}

:deep(.el-drawer__header) {
  margin-bottom: 0;
}

.el-divider {
  margin: 0 15px;
}

.el-breadcrumb__item:last-child :deep(.el-breadcrumb__inner) {
  color: #97a8be;
  cursor: text;
}

:deep(.el-scrollbar__wrap--hidden-default) {
  border-right: 0;
}

.box-card {
  position: relative;
  margin-bottom: 10px;
  width: 100%;
}

.msg-title {
  font-size: 16px;
  word-break: break-word;
}

.msg-content {
  font-size: 12px;
  word-break: break-word;
}

.msg-date {
  font-size: 12px;
  color: #7d7d7d;
  word-break: break-word;
}

.msg-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.all-read {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1;
}

.item-badge {
  width: 100%;
  margin-top: 10px;
  margin-right: 30px;
}

</style>
